<template>
    <div style="margin-top: 50px">
        <el-form :model="itemDto" :rules="rules" ref="itemDto" label-width="140px" style="width: 600px"
                 size="small">
            <el-form-item label="商品名称：" prop="title">
                <el-input v-model="itemDto.title"></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" prop="sellPoint">
                <el-input
                        :autoSize="true"
                        v-model="itemDto.sellPoint"
                        type="textarea"
                        placeholder="请输入内容"
                ></el-input>
            </el-form-item>
            <el-form-item label="商品价格：" prop="price">
                <el-input v-model="itemDto.price"></el-input>
            </el-form-item>
            <el-form-item label="库存：" prop="num">
                <el-input v-model="itemDto.num"></el-input>
            </el-form-item>
            <el-form-item label="限制数量：" prop="limitNum">
                <el-input v-model="itemDto.limitNum"></el-input>
            </el-form-item>
            <el-form-item label="商品图片和样式：" prop="detail">
                <el-input v-model="itemDto.detail"></el-input>
            </el-form-item>
            <el-form-item label="商品图片路径：" prop="image">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品板块id：" prop="cid">
                <el-input v-model="itemDto.cid"></el-input>
            </el-form-item>
            <el-form-item label="商品版块名称：" prop="cname">
                <el-input v-model="itemDto.cname"></el-input>
            </el-form-item>
            <el-form-item label="商品状态码：" prop="status">
                <el-input v-model="itemDto.status"></el-input>
            </el-form-item>
            <el-form-item label="创建时间：" prop="created">
                <el-input v-model="itemDto.created"></el-input>
            </el-form-item>
            <el-form-item label="更新时间：" prop="updated">
                <el-input v-model="itemDto.updated"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" size="medium" @click="itemAdd('itemDto')">添加商品</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {addItem} from "../../../../../api/item";
    import mytime from "../../../../../utils/datetime";

    export default {
        name: "ProductInfoDetail",
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                itemDto: {
                    'id': '',
                    'title': '',// 商品名称
                    'sellPoint': '',// 商品描述
                    'price': '',// 商品价格
                    'num': '',// 库存
                    'limitNum': '',// 限制数量
                    'detail': '',// 商品图片和样式
                    'image': '',// 商品图片路径
                    'cid': '',// 商品所在的板块id
                    'cname': '',// 商品所在的版块名称
                    'status': '',// 商品状态码
                    'created': mytime.gettime(),// 创建时间
                    'updated': mytime.gettime()// 更新时间
                },
                rules: {
                    title: {required: true, message: '请输入商品名称', trigger: 'blur'},
                    sellPoint: {required: true, message: '请输入商品描述', trigger: 'blur'},
                    price: {required: true, message: '请输入商品价格', trigger: 'blur'},
                    num: {required: true, message: '请输入库存', trigger: 'blur'},
                    limitNum: {required: true, message: '请输入限制数量', trigger: 'blur'},
                    detail: {required: true, message: '请输入商品图片和样式', trigger: 'blur'},
                    image: {required: true, message: '请输入商品图片路径', trigger: 'blur'},
                    cid: {required: true, message: '请输入商品所在的板块id', trigger: 'blur'},
                    cname: {required: true, message: '请输入商品所在的版块名称', trigger: 'blur'},
                    status: {required: true, message: '请输入商品状态码', trigger: 'blur'},
                    // created: {required: true, message: '请输入创建时间', trigger: 'blur'},
                    // updated: {required: true, message: '请输入更新时间', trigger: 'blur'},
                },
                dialogImageUrl: '',//图片上传
                dialogVisible: false
            };
        },
        created() {
            // console.log(mytime.gettime())
        },
        computed: {},
        watch: {},
        methods: {
            //添加商品
            itemAdd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addItem(this.itemDto).then(res => {
                            console.log(res)
                        })
                        // this.$message.success('success')
                    } else {
                        this.$message.error('请填写完整信息')
                    }
                })
            },
            //图片上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style scoped>
</style>
